
$(function() {
	$('#picture1').load(function() {
		$('#picture2').attr('src', picture2);
	});
	$('#picture2').load(function() {
		DIFFERENCE_GAMES_VIEW.init(differentPoints);
		$('#div-picture2,#div-picture1').unbind('click').click(function(e) {
			var x = e.pageX - $(this).position().left;
			var y = e.pageY - $(this).position().top;
			DIFFERENCE_GAMES_VIEW.click(x, y);
		}).mousemove(function(e){
			var x = e.pageX - $(this).position().left - 16;
			var y = e.pageY - $(this).position().top - 16;
			if(x >= -16 && x < $(this).width() - 16 && y> -16 && y< $(this).height() - 16){
				$('#div-picture2,#div-picture1').find('.cursor').show().css({
					top : y + 'px', left: x + 'px'
				});
			} else {
				$('#div-picture2,#div-picture1').trigger('mouseout');
			}
			
		}).mouseout(function(){
			$(this).find('.cursor').hide();		
		});
	});
	$('#picture1').attr('src', picture1);
});

var DIFFERENCE_GAMES_VIEW = {
	padding : 15,
    markCounter : 0,
    missedClicks : 0,
    marks : [],
    foundCounter : 0,
    init : function(marks){
    	this.marks = marks;
    },
    click : function(x, y){
    	x -= this.padding;
    	y -= this.padding;
    	var found = false;
    	for(var i=0;i<this.marks.length;i++){
    		var m = this.marks[i];
    		if(m.found){
    			continue;
    		}
    		var deltaX = Math.abs(m.x - x);
    		var deltaY = Math.abs(m.y - y);
    		if(deltaX < m.w /2 && deltaY < m.h / 2){
    			found = true;
    			m.found = true;
    			break;
    		}
    	}
    	if(found){
    		this.foundCounter++;
    		this.createMark('#div-picture2', this.padding + parseInt(m.x), this.padding + parseInt(m.y), m.w, m.h);
    		this.createMark('#div-picture1', this.padding + parseInt(m.x), this.padding + parseInt(m.y), m.w, m.h);
    		$('#found_points').text(this.foundCounter);
    		if(this.foundCounter == this.marks.length){
    			$('#div-picture2,#div-picture1').trigger('mouseout');
    			this.youwin();
    		}
    	} else {
    		if(this.foundCounter < this.markCounter){
    			this.missedClicks++;
    			$('#missed_clicks').text(this.missedClicks);
    		}
    	}
    },
    youwin : function(){
		// submit scores
    	$('#youwinDialog').dialog({
			autoOpen : false,
    		width : 300,
    		modal : true,
    		closeOnEscape : false,
    		open : function(){
    			$('#div-picture2,#div-picture1').trigger('mouseout');
    		},
    		close : function(){
				// back to index
    			window.location = $('#retireUrl').attr('href');
    		},
    		buttons : {
    			'Tiếp tục chơi' : function(){
    				window.location = $('#continueUrl').attr('href');
    			},
    			'Nghỉ' : function(){
					$('#youwinDialog').dialog('close');
    			}
    		}
    	});
		$.ajax({
			url : $('#PlayViewForm').attr('action'),
			type : 'POST',
			data : $('#PlayViewForm').serialize(),
			complete : function(){
				$('#youwinDialog').dialog('open');
			}
		});
    },
    createMark : function(id, x, y, width, height) {
		// min width
	    this.markCounter++;
	    var markId = 'mark_' + this.markCounter;
	    $(id).append('<div id="' + markId + '" class="marker"></div>');
	    // add marks to marks list
	    this.marks[markId] = true;
	    var $mark = $('#' + markId);
	    var radius = width < height ? height : width;
	    $mark.css({
	    	borderRadius : radius + 'px',
	    	width : width + 'px',
	    	height : height + 'px',
	    	left : x - width /2 + 'px',
	    	top : y - height /2 + 'px'
	    });
    }
};